<template>
  <div class="container" style="position: relative">
    <div style="position: relative; margin-top: -10px">
      <div
        style="
          height: 150px;
          width: 100%;
          padding: 30px 0 40px 0;
          position: relative;
        "
        :style="{
          background: `url(${sahing}) no-repeat`,
          backgroundSize: '100% 100%',
        }"
      >
        <van-row type="flex" align="bottom">
          <van-col
            offset="1"
            style="width: auto; height: 82px; text-align: center"
          >
            <div
              style="
                text-align: center;
                position: relative;
                top: -14px;
                transform: scale(0.8);
              "
            >
              <!-- <div
                style="width: 90px; height: 90px; background-size: 100% 100%"
              ></div> -->
              <van-image
                @click="toSetting"
                style=""
                round
                width="80px"
                height="80px"
                crossorigin="anonymous"
                :src="avatar"
              />
              <span
                :style="{
                  letterSpacing:
                    strlen(positionName) == 6
                      ? '4px'
                      : strlen(positionName) == 8
                      ? '2px'
                      : '0',
                  textIndent:
                    strlen(positionName) == 6
                      ? '6px'
                      : strlen(positionName) == 8
                      ? '3px'
                      : '0',
                }"
                style="
                  border-radius: 5px;
                  border: 1px solid #d89d34;
                  background-color: #fff;
                  text-align: center;
                  margin: 0px auto;
                  top: -11px;
                  font-size: 14px;
                  position: relative;
                  min-width: 80px;
                  height: 20px;
                  width: auto;
                  padding: 0 1px;
                  z-index: 200;
                  color: #daa13e;
                  display: block;
                "
              >
                {{ positionName }}
              </span>
            </div>
          </van-col>
          <van-col
            offset="1"
            style="
              padding-bottom: 25px;
              margin: 0;
              padding-left: 2%;
              width: 53%;
            "
          >
            <van-row style="margin-bottom: 5px">
              <span
                style="
                  display: block;
                  color: #fff;
                  font-weight: bold;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-size: 18px;
                "
                >{{ nickName }}</span
              >
            </van-row>
            <van-row>
              <van-button
                @click="toCheck"
                v-if="noverify"
                class="business_card"
                style="padding: 8px; font-size: 12px; border: 1px solid white"
                >点击登录 <span>/</span> 注册</van-button
              >
              <span
                icon="user-circle-o"
                class="business_card"
                style="display: block; letter-spacing: 1px"
                :v-bind="phoneNum"
                v-else
                >{{ phoneNum }}</span
              >
            </van-row>
          </van-col>
          <!-- 设置按钮 -->
          <van-col>
            <van-icon name="arrow" class="user_set" @click="toSetting" />
          </van-col>
        </van-row>
        <!-- 名片按钮 -->
        <van-row class="box_but_z" type="flex">
          <van-col span="8" @click="share">
            <van-button icon="card">我的二维码</van-button>
          </van-col>
          <!-- <van-col v-if="isManager" v-show="false">
            <van-button icon="friends-o" @click="myKh">我的客户</van-button>
          </van-col> -->
          <van-col @click="myKf">
            <van-button icon="phone">电话咨询</van-button>
          </van-col>
          <span class="vertical"></span>
        </van-row>
      </div>
      <!-- 我的订单 -->
    </div>
    <nav class="nav" style="display: flex">
      <van-row
        class="order_status"
        type="flex"
        justify="center"
        style="height: 76px; border-radius: 6px; width: 100%"
      >
        <van-col style="width: 20%; padding-top: 12px; flex: 1">
          <div class="order_status_icon" @click="statement('/order')">
            <van-icon name="cart" dot size="27" />
          </div>
          <div>我的购物车</div>
          <span class="vertical"></span>
        </van-col>
        <van-col style="width: 20%; padding-top: 12px; flex: 1">
          <div
            class="order_status_icon"
            @click="statement('/user/order/list/1')"
          >
            <van-icon name="credit-pay" dot size="27" />
          </div>
          <div>我的定单</div>
        </van-col>

        <van-col style="width: 20%; padding-top: 12px; flex: 1">
          <div
            class="order_status_icon"
            @click="statement('/user/address?type=usercenter')"
          >
            <van-icon name="location-o" size="27" />
          </div>
          <div>我的地址</div>
        </van-col>
        <van-col style="width: 20%; padding-top: 12px; flex: 1">
          <div class="order_status_icon" @click="callKf">
            <!-- <van-icon name="shouhouguanli" :info="order.uncomment > 0 ? order.uncomment : ''"/> -->
            <van-icon name="service-o" size="27" />
          </div>
          <div>平台客服</div>
        </van-col>
      </van-row>
    </nav>
    <!-- 网站导航 -->
    <div style="color: white; display: flex" class="nave">
      <aside
        class="leftcard"
        v-for="(item, index) in menlist"
        :key="index"
        :style="{
          background: `url(${item.image}) no-repeat`,
          backgroundSize: '100% 100%',
          borderRadius: '5px',
        }"
        @click="Toexp(item.officialUrl)"
      ></aside>
    </div>

    <!-- 金牌会员卡 -->
    <ul
      style="
        display: flex;
        margin: 10px 4%;
        justify-content: space-between;
        background: white;
        border-radius: 6px;
      "
    >
      <li class="member-card" v-for="(item, index) in openlist" :key="index">
        <img
          :src="item.image"
          alt=""
          width="100%"
          height=""
          style="border-radius: 4px"
          @click="tomemBer(item.officialUrl)"
        />
      </li>
    </ul>

    <!-- 会员专区 -->
    <div class="adminmanage" v-if="viplist.length > 0">
      <van-row
        style="
          border-bottom: 1px solid rgba(187, 187, 187, 0.2);
          height: 41px;
          line-height: 41px;
          font-weight: bold;
          margin-bottom: 10px;
        "
      >
        <van-col span="20" style="text-align: left; padding-left: 6%"
          >喷喷涂涂专区</van-col
        >
      </van-row>
      <van-row style="padding-bottom: 1rem">
        <van-col
          :style="{ paddingTop: '1rem' }"
          span="6"
          v-for="(val, ind) in viplist"
          :key="ind"
        >
          <div @click="tofun(val.officialUrl)">
            <div class="order_status_icon">
              <van-icon :name="val.image" size="35" />
            </div>
            <div>{{ val.name }}</div>
          </div>

          <!-- <div v-if="val.officialUrl == 1" @click="toQrCode">
            <div class="order_status_icon">
              <van-icon :name="val.image" />
            </div>
            <div>{{ val.name }}</div>
          </div> -->
        </van-col>
      </van-row>
    </div>
    <!-- 我的客户  -->

    <!-- 我的客户(金牌会员板块)  -->
    <div v-if="false" class="adminmanage">
      <!--before:<div v-if="memberLevel == 1 && !isManager" class="adminmanage">"-->
      <van-row
        style="
          border-bottom: 1px solid rgba(187, 187, 187, 0.2);
          height: 41px;
          line-height: 41px;
          font-weight: bold;
        "
      >
      </van-row>
    </div>

    <!-- 信息发布 -->
    <div class="function" v-if="Functlist.length > 0">
      <van-row
        style="
          border-bottom: 1px solid rgba(187, 187, 187, 0.2);
          height: 41px;
          line-height: 41px;
          font-weight: bold;
        "
      >
        <van-col span="20" style="text-align: left; padding-left: 6%"
          >信息发布</van-col
        >
      </van-row>
      <van-row style="padding-bottom: 1rem">
        <van-col
          span="6"
          @click="domain(vlu.officialUrl)"
          style="padding-top: 1rem"
          v-for="(vlu, ind) in Functlist"
          :key="ind"
        >
          <div>
            <van-icon style :name="vlu.image" size="40" />
            <br />
            <span>{{ vlu.name }}</span>
          </div>
        </van-col>
      </van-row>
    </div>
    <div
      class="adminmanage"
      v-if="backstagelist.length > 0"
      style="margin-top: 10px"
    >
      <van-row
        style="
          border-bottom: 1px solid rgba(187, 187, 187, 0.2);
          height: 41px;
          line-height: 41px;
          font-weight: bold;
          margin-bottom: 10px;
        "
      >
        <van-col span="20" style="text-align: left; padding-left: 6%"
          >后台管理</van-col
        >
      </van-row>
      <van-row style="padding-bottom: 1rem">
        <van-col
          :style="{ paddingTop: '1rem' }"
          span="6"
          v-for="(val, ind) in backstagelist"
          :key="ind"
        >
          <div
            v-if="val.officialUrl != 1"
            @click="tomange(val.officialUrl, val.functionFlag)"
          >
            <div class="order_status_icon">
              <van-icon :name="val.image" size="30" />
            </div>
            <div>{{ val.name }}</div>
          </div>

          <div v-if="val.officialUrl == 1" @click="toQrCode">
            <div class="order_status_icon">
              <van-icon :name="val.image" size="30" />
            </div>
            <div>{{ val.name }}</div>
          </div>
        </van-col>
      </van-row>
    </div>
    <!-- 服务中心 -->
    <div class="kf_content" v-if="serviceslist.length > 0">
      <van-row style="height: 41px; line-height: 41px; font-weight: bold">
        <van-col span="20" style="padding-left: 6%">服务中心</van-col>
      </van-row>
      <!-- <van-row style="
          border-top: 1px solid rgba(187, 187, 187, 0.2);
          padding-top: 20px;
        "> -->
      <van-row
        style="
          border-top: 1px solid rgba(187, 187, 187, 0.2);
          padding-bottom: 1rem;
        "
      >
        <van-col
          span="6"
          v-for="(vlu, ind) in serviceslist"
          :key="ind"
          style="padding-top: 1rem"
        >
          <div
            style="text-align: center"
            @click="statement(vlu.officialUrl)"
            v-if="vlu.officialUrl != '19975086862'"
          >
            <van-icon style :name="vlu.image" size="40" />
            <br />
            <span>{{ vlu.name }}</span>
          </div>
          <div
            style="text-align: center"
            @click="callKf"
            v-if="vlu.officialUrl == '19975086862'"
          >
            <van-icon style :name="vlu.image" size="40" />
            <br />
            <span>{{ vlu.name }}</span>
          </div>
        </van-col>
      </van-row>
    </div>
    <!-- 关于我们 -->
    <slot v-if="!!v_html.about_us">
      <div class="about_us" v-html="v_html.about_us"></div>
    </slot>
    <slot v-else>
      <div class="about_us">
        <van-row>
          <van-col
            span="20"
            offset="1"
            style="height: 41px; line-height: 41px; font-weight: bold"
            >关于我们</van-col
          >
        </van-row>
        <van-row
          style="
            border-top: 1px solid rgba(187, 187, 187, 0.2);
            padding-top: 10px;
          "
        >
          <van-col span="22" offset="1"
            >喷喷涂涂网是一个涂装专业的服务平台。</van-col
          >
        </van-row>
        <van-row style="padding: 10px 0">
          <van-col span="22" offset="1"
            >用互联网和大数据赋能传统涂装产业的新型平台--喷喷涂涂网，全品类服务用户、让利用户、给用户“智惠”体验，让涂装施工更加高效、便捷、环保。</van-col
          >
        </van-row>

        <van-row style="padding-bottom: 10px">
          <van-col span="22" offset="1"
            >喷喷涂涂网联动万家厂商、线上线下一体化服务、打造独特商业竞争力，致力于成为中国最具影响力的涂装行业服务平台。</van-col
          >
        </van-row>
        <van-row style="padding-bottom: 10px">
          <van-col span="22" offset="1">关注微信公众号--喷喷涂涂</van-col>
        </van-row>
        <van-row style="padding-bottom: 10px">
          <van-col span="22" offset="1"
            >共创、共建、共享、创新，服务创造价值！</van-col
          >
        </van-row>
      </div>
    </slot>
    <!-- 会员证 -->
    <!-- <div
      class="member_boxz"
      v-if="memberLevel == 1 && memberInfo.expire_year != ''"
    >
      <img
        class="member_boxt"
        src="https://xintu361.oss-cn-qingdao.aliyuncs.com/r741z4y3mg0buas85rx0.png"
        alt
      />
      <div class="member_bianhao">
        <img
          src="https://xintu361.oss-cn-qingdao.aliyuncs.com/fff14p4qfdpctt5eenhn.png"
          width
          alt
        />
        <span>
          {{
            memberInfo.member_number_prefix + memberInfo.member_number_suffix
          }}
        </span>
      </div>
      <div class="member_content">
        <div class="member_name">
          <span>{{ memberInfo.name }}</span
          >先生/女生:
        </div>
        <div>
          恭喜您成为“喷喷涂涂新零售”金牌会员！“喷喷涂涂新零售”为您提供会员一对一客户经理专人服务，您可以尊享到我们金牌会员特价产品，您还可以了解更多的工程发包、工人找活等多类涂装服务信息，并可以发布自己施工需求信息、有机会优先成为我们的线上代理。在此过程中如需要帮助，请直接拨打您的客服经理电话。祝您生活愉快!
        </div>
        <div class="member_data">
          金牌会员权益有效期至：
          <span>{{ memberInfo.expire_year }}</span
          >年 <span>{{ memberInfo.expire_month }}</span
          >月 <span>{{ memberInfo.expire_day }}</span
          >日
        </div>
      </div>

      <img
        style="width: 100%"
        src="https://xintu361.oss-cn-qingdao.aliyuncs.com/9mfm5l5rn2qi5fsi9d6f.jpg"
        alt
      />
    </div> -->

    <!--  协议弹窗 -->

    <div
      v-show="showpro"
      style="
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        position: fixed;
        z-index: 222;
        overflow: hidden;
        top: 0;
        display: flex;
        flex-flow: column;
        align-items: center;
        padding-bottom: 15%;
      "
    >
      <ul
        style="
          display: flex;
          padding-bottom: 10px;
          flex-flow: column;
          width: 90%;
          height: 90%;
          background: white;
          border-radius: 15px;
          margin: auto;
        "
      >
        <li style="display: flex; width: 100%; height: 9%">
          <div
            style="
              width: 10%;
              padding-left: 22px;
              text-align: center;
              font-size: 25px;
              display: flex;
              align-items: center;
            "
            @click="agreement(0)"
          >
            ×
          </div>
          <div
            style="
              width: 80%;
              padding: 0px 0;
              text-align: center;
              color: #ed3e00;
              font-size: 16px;
              display: flex;
              align-items: center;
            "
          >
            <p style="width: 90%; text-align: center; margin: 0 auto">
              <b>用户协议</b>
            </p>
          </div>
        </li>
        <li
          class="addHtml"
          style="width: 100%; height: 90%; overflow: scroll; padding: 5px 7px"
        >
          1111111111
        </li>
        <li style="display: flex; width: 100%; height: 10%">
          <p
            style="
              width: 90%;
              padding: 7px 0;
              text-align: center;
              color: white;
              margin: auto;
              background: #ed3e00;
              font-size: 16px;
              border-radius: 4px;
            "
            @click="agreement(3)"
          >
            <b>我已阅读并了解此条款</b>
          </p>
        </li>
      </ul>
    </div>

    <!-- 弹窗提示插件 -->
    <div
      v-show="showprotocol"
      style="
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        position: fixed;
        overflow: hidden;
        top: 0;
        display: flex;
        flex-flow: column;
        align-items: center;
        padding-bottom: 15%;
      "
    >
      <ul
        style="
          display: flex;
          flex-flow: column;
          width: 90%;
          height: 160px;
          background: white;
          border-radius: 15px;
          margin: auto;
        "
      >
        <li
          style="
            width: 100%;
            height: 9%;
            flex: 1;
            flex-flow: column;
            padding-top: 4%;
          "
        >
          <div style="width: 100%; text-align: center; font-weight: 500">
            系统提示
          </div>
        </li>
        <li style="width: 100%; height: 9%; flex: 1">
          <div style="width: 100%; text-align: center; color: #646566">
            确定购买？
          </div>
        </li>
        <!-- <li style="width: 100%; flex: 1">
          <div
            style="
              padding: 4px 16px;
              color: #ee3f00;
              display: flex;
              justify-content: center;
            "
          >
            <span style="display: inline-block">
              <van-checkbox
                v-model="TermsOfService"
                shape="square"
                checked-color="#07c160"
              ></van-checkbox>
            </span>
            <span
              style="
                margin-left: 10px;
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              "
              :style="{ color: !TermsOfService ? '#ccc8c8' : '#EE3F00' }"
              class="have_read_protocol"
            >
              &ensp;已阅读并同意
              <span style="" @click="showtxt()">《喷喷涂涂市场用户协议》</span>
            </span>
          </div>
        </li> -->
        <li
          style="
            width: 100%;
            padding: 5px 0;
            flex: 1;
            display: flex;
            border-top: 1px solid #f5f6f8;
          "
        >
          <p
            style="
              width: 50%;
              margin: 0;
              text-align: center;
              font-size: 16px;
              line-height: 35px;
              border-right: 1px solid #f5f6f8;
            "
            @click="agreement(1)"
          >
            取消
          </p>
          <p
            style="
              width: 50%;
              color: #ee3f00;
              margin: 0;
              text-align: center;
              font-size: 16px;
              line-height: 35px;
            "
            @click="agreement(2)"
          >
            确定
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import my_order from '@/assets/images/my_order.png';
import sahing from '@/assets/images/shading.jpg';
import experience from '@/assets/images/experience.png';
import icon_experience from '@/assets/images/icon_experience.png';
import sales from '@/assets/images/sales.png';
import icon_sales from '@/assets/images/icon_sales.png';
import my_project from '@/assets/images/my_project.png';
import ordinarycard from '@/assets/images/ordinarycard.png';
import my_teams from '@/assets/images/my_teams.png';
import my_used from '@/assets/images/my_used.png';
import my_rent from '@/assets/images/rent.png';
import my_network from '@/assets/images/network.png';
import shadow_rightPng from '@/assets/images/user_center_shadow.png';
import member_card from '@/assets/images/member_card.png';
import tencard_link from '@/assets/images/tencard_link.png';
import {
  Image,
  Row,
  Col,
  Divider,
  Toast,
  DropdownMenu,
  DropdownItem,
  Icon,
  Dialog,
  Popup,
  Checkbox,
} from 'vant';
import myear from '@/assets/images/myearning.png';
import already from '@/assets/images/already.png';
import { getLocalStorage } from '@/utils/local-storage';
import checklog from '@/assets/images/checklog.png';
import record from '@/assets/images/record.png';
import {
  authInfo,
  userIndex,
  getMemberInfoByUserId,
  getArticleHtmlList,
  gethomebuton,
  cartGoodsCount,
  qustores,
  getOrderSign,
} from '@/api/api';
import wx from 'weixin-js-sdk';
import icon1 from '@/assets/images/business/1.png';
import icon2 from '@/assets/images/business/2.png';
import icon3 from '@/assets/images/business/3.png';
import icon4 from '@/assets/images/business/4.png';
import icon5 from '@/assets/images/business/5.png';
import icon6 from '@/assets/images/business/6.png';

export default {
  name: 'business-card',

  props: {
    isLogin: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      sahing,
      TermsOfService: false,
      showprotocol: false,
      showpro: false,
      vipid: 0,
      ordinary_card: ordinarycard,
      experience: experience,
      already: already,
      sales: sales,
      icon_experience: icon_experience,
      icon_sales: icon_sales,
      memberInfo: {
        expire_month: '',
        expire_day: '',
        expire_year: '',
        name: '',
        member_number_prefix: '',
        member_number_suffix: '',
      },
      ceshi: 'window.location.href',
      Functlist: '',
      isAttention: 1,
      shadow_rightPng: shadow_rightPng,
      bottomkfshow: true,
      order: [],
      value: -1,
      myOrder: my_order,
      myProject: my_project,
      myTeams: my_teams,
      myUsed: my_used,
      myRent: my_rent,
      myNetwork: my_network,
      nickName: '',
      status: 0,
      mobile: '',
      memberLevel: 0,
      positionId: -1,
      positionName: '',
      userId: '0',
      directorId: '',
      managerType: -1,
      isManager: false,
      setquan: false,
      avatar: '',
      backstagelist: '',
      viplist: '',
      noverify: true,
      phoneNum: '',
      headImgBg:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/32uqbv6gx4bp4m9tq48w.gif',
      addressPng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/m0arid8o671l6xh7tjar.png',
      complainPng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/yc5o3x0ere35plshlern.png',
      collectPng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/y44yh3gww0bapufp8ty7.png',
      aboutusPng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/ennrxu6u41btqkdn84hm.png',
      orderPng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/gp14vhm41459gxptt4pa.png',
      workersPng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/8k1xt5y6wgstgub3ejju.png',
      projectPng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/cfy7awyov710p51ldh8k.png',
      serverPng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/oucrwz54hvr9r9cihyp7.png',
      usedPng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/9bwnflm9hfw695hl5l5b.png',
      rentPng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/ki0al24ea8b1ffztemx7.png',
      servicePng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/4mwyeo1kuew0fp7kmxsx.png',
      helpPng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/glwgx6kzavg6cz5msnlt.png',
      bannerPng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/g8cknarsrfsfjobmn3k9.jpg',
      //orderPng:'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/kakbl72fpmvnyoqem0ln.png',
      //projectPng:'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/eab6thk7jxaknum7pz6f.png',
      recommendPng:
        'https://xintu361.oss-cn-qingdao.aliyuncs.com/ttmall/e8fifx31h9ftcb9won3x.png',
      check: checklog,
      record: record,
      myear: myear,
      material: {
        icon1: icon1,
        icon2: icon2,
        icon3: icon3,
        icon4: icon4,
        icon5: icon5,
        icon6: icon6,
      },
      serviceslist: '',
      menlist: '',
      openlist: '',
      v_html: {
        helpList: [],
        protocol: '',
        about_us: '',
      },
      member_card: member_card,
      tencard_link: tencard_link,
      orderSn: undefined,
      odecar: '',
    };
  },

  created() {
    this.getUserInfo();
    this.initOrder();
    this.init();
    cartGoodsCount().then((res) => {
      this.odecar = res.data.data;
    });
  },

  watch: {
    '$route.path': function (newVal, oldVal) {
      //console.log(newVal+"---"+oldVal);
      if (newVal === '/user/business/card' && oldVal === '/check') {
        this.getUserInfo();
        this.initOrder();
      }
    },
  },

  methods: {
    domain(link) {
      if (this.mobile == '' || this.mobile == undefined) {
        Dialog.confirm({
          title: '系统提示',
          message: '请先登录',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
          .then(() => {
            this.$router.push({ path: '/check' });
          })
          .catch(() => {});
        return;
      }
      this.$router.push({ path: link });
    },
    tomange(link, find) {
      if (link == '/keepshop/myoplist') {
        qustores({ userId: this.userId })
          .then((res) => {
            let shopdata = res.data.data;
            if (shopdata.tel == undefined) {
              Toast('请先填写门店信息');
            }
            this.$router.push({ path: link });
          })
          .catch((err) => {
            Toast(err.data.errmsg);
            return;
          });
      }
      if (!find) {
        if (link == '/keepshop/myoplist') {
          Toast('请先通过门店信息审核！');
        } else if (link == '/keepshop/open') {
          Toast('请填写“会员店”或“联盟店”信息');
        }
        return;
      }
      if (this.mobile == '' || this.mobile == undefined) {
        Dialog.confirm({
          title: '系统提示',
          message: '请先登录',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
          .then(() => {
            this.$router.push({ path: '/check' });
          })
          .catch(() => {});
        return;
      }
      this.$router.push({ path: link });
    },

    showtxt() {
      this.showpro = true;
    },

    agreement(id) {
      if (id == 3) {
        this.TermsOfService = true;
        this.showpro = false;
        return;
      }
      if (id == 0) {
        this.showpro = false;
        return;
      }
      if (id == 2) {
        this.vipid = 1181170;
        this.pay(2);
        // if (this.TermsOfService) {
        // } else {
        //   Toast('请先同意协议');
        //   return;
        // }
      }
      this.showprotocol = false;
    },

    Tosas(id) {
      this.$router.push({
        path: `/merchant/merchant-list/${id}`,
      });
    },

    Toexp(id) {
      this.$router.push({
        path: id,
      });
    },
    init() {
      //获取 关于我们 v_html渲染数据
      getArticleHtmlList({
        keywords: '关于我们',
      }).then((res) => {
        this.v_html.about_us =
          res.data.data.list &&
          res.data.data.list[0] &&
          res.data.data.list[0]['content']
            ? res.data.data.list[0]['content']
            : '';
      });

      gethomebuton({
        userId: Number(getLocalStorage('userId').userId),
        mode: 2,
      })
        .then((res) => {
          this.Functlist = res.data.data || res.data;
        })
        .catch((err) => {
          this.Functlist = err.data.data || err.data;
          // console.log(err.data);
        });
      gethomebuton({
        userId: Number(getLocalStorage('userId').userId),
        mode: 3,
      })
        .then((res) => {
          this.serviceslist = res.data.data || res.data;
        })
        .catch((err) => {
          this.serviceslist = err.data.data || err.data;
          // console.log(err.data);
        });

      gethomebuton({
        userId: Number(getLocalStorage('userId').userId),
        mode: 5,
      })
        .then((res) => {
          this.viplist = res.data.data || res.data;
        })
        .catch((err) => {
          this.viplist = err.data.data || err.data;
          //console.log(err.data);
        });
      gethomebuton({
        userId: Number(getLocalStorage('userId').userId),
        mode: 6,
      })
        .then((res) => {
          this.menlist = res.data.data || res.data;
        })
        .catch((err) => {
          this.menlist = err.data.data || err.data;
          //console.log(err.data);
        });
      gethomebuton({
        userId: Number(getLocalStorage('userId').userId),
        mode: 7,
      })
        .then((res) => {
          this.openlist = res.data.data || res.data;
        })
        .catch((err) => {
          this.openlist = err.data.data || err.data;
          //console.log(err.data);
        });
    },
    //获取会员信息
    getMemberInfo() {
      getMemberInfoByUserId({
        userId: this.userId,
      })
        .then((res) => {
          if (res.data.data && res.data) {
            this.memberInfo = res.data.data;
            let len = (res.data.data.id + '').length;
            let str = '';
            for (let index = 0; index < 8 - len; index++) {
              str += '0';
            }
            this.memberInfo.member_number_suffix = str + this.memberInfo.id;
          }
        })
        .catch((err) => {});
    },
    strlen(str) {
      var len = 0;
      for (var i = 0; i < str.length; i++) {
        var c = str.charCodeAt(i);
        //单字节加1
        if ((c >= 0x0001 && c <= 0x007e) || (0xff60 <= c && c <= 0xff9f)) {
          len++;
        } else {
          len += 2;
        }
      }
      return len;
    },
    toMyIncome() {
      this.$router.push({
        path: '/user/myIncome',
      });
    },
    toSetting() {
      this.$router.push({
        path: '/user/information',
      });
    },
    initOrder() {
      userIndex().then((res) => {
        this.order = res.data.data.order;
      });
    },
    // showKfBottom() {
    //   if (this.bottomkfshow == true) {
    //     this.bottomkfshow = false;
    //   } else {
    //     this.bottomkfshow = true;
    //   }
    // },
    redirectTo(url) {
      this.$router.push({
        path: url,
      });
    },
    toQrCode() {
      this.$router.push({
        name: 'receive-qrcode',
        query: {
          avatar: this.avatar,
          nickName: this.nickName,
          positionName: this.positionName,
        },
      });
    },
    toManager(positionId) {
      // this.$router.push({ path: '/user/business/admin?positionId=' + positionId });

      this.$router.push({
        path: '/user/admin/class?positionId=' + positionId,
      });
    },
    toCheck() {
      this.$router.push({
        path: '/check',
      });
    },
    toEarning() {
      this.$router.push({
        path: '/earnings',
      });
    },
    toCusOrder() {
      let url = '/user/order/clientlist/0';
      this.$router.push({
        path: url,
      });
    },
    toAfterSaleOrder() {
      let url = '/user/order/after/0';
      this.$router.push({
        path: url,
      });
    },
    toCusUsed() {
      let url = '/info/client-used?userId=' + this.userId;
      this.$router.push({
        path: url,
      });
    },
    toSign() {
      let url = '/sign';
      this.$router.push({
        path: url,
      });
    },
    toMyOrder() {
      let url = '/user/order/list/0';
      this.$router.push({
        path: url,
      });
    },
    toMyUsed() {
      let url = '/info/my-used';
      this.$router.push({
        path: url,
      });
    },
    toMyRent() {
      let url = '/info/my-rent';
      this.$router.push({
        path: url,
      });
    },
    toCheckt() {
      if (this.userLevel == 0) {
        return;
      }
      let url = '/inquery/inquirypart';
      this.$router.push({
        path: url,
      });
    },
    toRecord() {
      if (this.userLevel == 0) {
        return;
      }
      let url = '/record/parts';
      this.$router.push({
        path: url,
      });
    },
    toMyNet() {
      let url = '/store/apply';
      this.$router.push({
        path: url,
      });
    },
    toMyTeams() {
      let url = '/info/my-workers';
      this.$router.push({
        path: url,
      });
    },
    toMyProject() {
      let url = '/info/my-project';
      this.$router.push({
        path: url,
      });
    },
    toCustomers() {
      let url = '/user/business/customers';
      this.$router.push({
        path: url,
      });
    },
    toMemberCustomers() {
      let url = '/user/member/customers?userId=' + this.userId;
      this.$router.push({
        path: url,
      });
    },
    callKf() {
      window.location.href = 'tel:19975086862';
    },
    getUserInfo() {
      const infoData = getLocalStorage('nickName', 'avatar');
      this.avatar = infoData.avatar || '';
      this.nickName = infoData.nickName || '昵称';
      authInfo()
        .then((res) => {
          this.userId = res.data.data.userId || '0';
          this.mobile = res.data.data.mobile || '';
          this.isAttention = res.data.data.isAttention;
          this.status = res.data.data.status;
          this.directorId = res.data.data.directorId;
          this.managerType = res.data.data.managerType;
          this.memberLevel = res.data.data.memberLevel;
          this.positionId = res.data.data.positionId;
          this.positionName = res.data.data.positionName || '区域经理';
          this.userLevel = res.data.data.userLevel;
          this.avatar = res.data.data.avatar || '';
          if (res.data.data.userLevel >= 2) {
            this.isManager = true;
          } else {
            if (this.memberLevel == 1) {
              this.positionName = '金牌会员';
            } else if (this.memberLevel == 2) {
              this.positionName = '普通会员';
            } else if (this.memberLevel == 0 && this.userLevel == 0) {
              this.positionName = '新用户';
            }
          }
          if (this.status == 1) {
            // 1 代表已验证
            this.phoneNum = res.data.data.mobile;
            this.noverify = false;
          }
        })
        .then(() => {
          gethomebuton({
            userId: Number(getLocalStorage('userId').userId),
            mode: 4,
          })
            .then((res) => {
              let funct = res.data.data;
              this.backstagelist = res.data.data || res.data;
              funct.forEach((e) => {
                if (e.name == '我要开店') {
                  if (this.positionId) {
                    this.setquan = true;
                  }
                  // e.functionContent.split();
                }
              });
            })
            .catch((err) => {});
          this.getMemberInfo({
            userId: this.userId,
          });
        });
    },

    statement(link) {
      if (this.mobile == '' || this.mobile == undefined) {
        Dialog.confirm({
          title: '系统提示',
          message: '请先登录',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
          .then(() => {
            this.$router.push({ path: '/check' });
          })
          .catch(() => {});
        return;
      }
      this.$router.push({ path: link });
    },
    // 判定是否是金牌会员
    tofun(link) {
      if (this.mobile == '' || this.mobile == undefined) {
        Dialog.confirm({
          title: '系统提示',
          message: '请先登录',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        })
          .then(() => {
            this.$router.push({ path: '/check' });
          })
          .catch(() => {});
      }

      if (link == '/items/members-zone/1') {
        if (this.memberLevel != 1) {
          this.showprotocol = true;
        } else {
          this.$router.push({ path: link });
        }
      } else {
        this.$router.push({ path: link });
      }
    },

    tomemBer(id) {
      this.vipid = Number(id);

      Dialog.confirm({
        title: '系统提示',
        message: '确定购买?',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(() => {
          if (this.mobile == '') {
            Dialog.confirm({
              title: '系统提示',
              message: '请先登录',
              confirmButtonText: '确定',
              cancelButtonText: '取消',
            })
              .then(() => {
                this.$router.push({ path: '/check' });
              })
              .catch(() => {});
            return;
          }
          this.pay(2);
        })
        .catch(() => {});
    },

    pay(type) {
      if (typeof WeixinJSBridge == 'undefined') {
        if (document.addEventListener) {
          document.addEventListener(
            'WeixinJSBridgeReady',
            onBridgeReady1,
            false
          );
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady1);
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady1);
        }
      } else {
        this.onBridgeReady1();
      }
    },
    onBridgeReady1() {
      getOrderSign({
        orderId: this.vipid,
      }).then((res) => {
        let that = this;

        that.orderSn = res.data.data.orderSn;

        const Mfbank = JSON.parse(res.data.data.info.wcPayData);

        WeixinJSBridge.invoke(
          'getBrandWCPayRequest',
          {
            appId: Mfbank.appId, //公众号名称，由商户传入
            timeStamp: Mfbank.timeStamp, //时间戳，自1970年以来的秒数
            nonceStr: Mfbank.nonceStr, //随机串
            package: Mfbank.package,
            signType: Mfbank.signType, //微信签名方式：
            paySign: Mfbank.paySign, //微信签名
          },
          function (res) {
            if (res.err_msg == 'get_brand_wcpay_request:ok') {
              //跳转到开通会员接口
              setTenCardOnline({
                orderSn: that.orderSn,
                goodId: this.vipid,
              }).then((res) => {
                let status = 0;
                if (res.data.errmsg == '成功') {
                  status = 1;
                }
                that.$router.push({
                  name: 'paymentVipStatus',
                  query: {
                    status: status,
                  },
                });
              });
            }
          }
        );
      });
    },

    share() {
      if (this.status == 0) {
        //Toast.fail('暂时没有客服');
        Dialog.confirm({
          title: '绑定手机',
          message: '请先绑定您的手机号，享受专属客服为您服务。',
          confirmButtonText: '去绑定',
        })
          .then(() => {
            // on confirm
            this.$router.push(`/check`);
          })
          .catch(() => {
            // on cancel
          });
        return;
      }

      this.$router.push({
        path: '/user/card/share',
        name: 'user-card-share',
        query: {
          shareId: this.userId,
          userId: this.directorId,
        },
      });
    },
    myKh() {
      this.$router.push({
        path: '/user/member/customers',
        name: 'member-customers',
        query: {
          userId: this.userId,
        },
      });
    },
    myKf() {
      if (this.status == 0) {
        //Toast.fail('暂时没有客服');
        Dialog.confirm({
          title: '绑定手机',
          message: '请先绑定您的手机号，享受专属客服为您服务。',
          confirmButtonText: '去绑定',
        })
          .then(() => {
            // on confirm
            this.$router.push(`/check`);
          })
          .catch(() => {
            // on cancel
          });
        return;
      }
      this.$router.push({
        name: 'kf-card',
        query: {
          directorId: this.directorId,
        },
      });
    },
  },

  components: {
    [Checkbox.name]: Checkbox,
    [Image.name]: Image,
    [Popup.name]: Popup,
    [Row.name]: Row,
    [Col.name]: Col,
    [Divider.name]: Divider,
    [Toast.name]: Toast,
    [Icon.name]: Icon,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Dialog.Component.name]: Dialog.Component,
  },
};
</script>

<style lang="scss" scoped>
.van-info--dot {
  margin-top: 5px !important;
}
/deep/.van-icon__image {
  height: auto;
}
.user_set {
  position: absolute;
  top: 52px;
  right: 20px;
  font-size: 24px;
  color: #fff;
}

@import '../../../assets/scss/mixin';
.nave {
  display: flex;
  justify-content: space-between;
  padding: 0 4%;
  padding-top: 10px;
}

.leftcard,
.rightcard {
  width: 48%;
  height: 70px;
}

.order_status {
  background-color: #fff;
  text-align: center;
  font-size: 12px;

  .shadowPng {
    position: absolute;
    right: -5%;
    top: 12px;
    height: 63%;
    width: 10%;
  }

  > div {
    @include one-border;

    &::after {
      top: 50%;
      left: 50%;
      border-bottom: 0;
      height: 150%;
      transform: scale(0.5) translate3d(-50%, -50%, 0);
      transform-origin: 0 0;
    }

    &:last-child::after {
      border: 0;
    }
  }

  .order_status_icon {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-block;

    i {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      font-size: 24px;
      color: #555454;
    }
  }

  .vertical {
    display: block;
    position: absolute;
    right: -5%;
    top: 12px;
    height: 63%;
    width: 1px;
    background: #d4d4d4;
    // transform: scale(.5, 1);
  }
}

/deep/ .van-dropdown-menu__title {
  font-size: 14px;
  padding: 0 8px 0 4px;
}

/deep/.van-dropdown-menu {
  height: auto;
}

/deep/.van-dropdown-menu__title--active {
  color: #ee3f00;
}

/deep/.van-dropdown-item__option--active {
  color: #ee3f00;
}

/deep/.van-dropdown-item__option--active .van-dropdown-item__icon {
  color: #ee3f00;
}

/deep/.van-popup--top {
  width: 92%;
  margin-left: 4%;
}

.sdfa {
  color: white;
  font-size: 14px;
}

.van-button--normal {
  padding: 0px;
}

.adminmanage {
  background-color: #fff;
  margin: 0 4% 10px 4%;
  border-radius: 6px;

  .van-icon {
    font-size: 28px;
    color: #555454;
  }

  div {
    text-align: center;
    margin-bottom: 5px;

    span {
      font-size: 13px;
    }
  }
}

.nav {
  margin: 40px 4% 0 4%;
}

.member-card {
  text-align: center;
  width: 33%;
  background-color: #fff;
  margin: 10px 1%;
  border-radius: 6px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.function {
  background-color: #fff;
  margin: 0 4%;
  border-radius: 6px;

  div {
    text-align: center;

    span {
      font-size: 14px;
    }
  }
}

.kf_content {
  background-color: #ffffff;
  margin: 10px 4% 0 4%;
  border-radius: 6px;
  transition: height 0.35s;
  -moz-transition: height 0.35s;
  /* Firefox 4 */
  -webkit-transition: height 0.35s;
  /* Safari and Chrome */
  -o-transition: height 0.35s;
  /* Opera */
}

.business_card {
  background: none;
  border: none;
  color: #fff;
}

.business_card_button {
  background: none;
  border: none;
  color: #000;
}

.about_us {
  background-color: #fff;
  height: auto;
  margin: 10px 4% 30px 4%;
  border-radius: 6px;
}

.van-button {
  height: 20px;
  line-height: 20px;
}

// p {

// }

.box_but_z {
  position: absolute;
  width: 100%;
  padding: 0 4%;
  bottom: -28px;

  .van-col {
    flex: 1;
    text-align: center;
    background: white;
    padding: 10px 0;

    button {
      height: 36px;
      padding: 0px 5px;
      color: #1d5ae8;
      border: none;
    }
  }

  > .van-col:nth-of-type(1) {
    border-radius: 5px 0 0 5px;
  }

  > .van-col:nth-of-type(2) {
    border-radius: 0 5px 5px 0 !important;
  }

  > .vertical {
    display: block;
    width: 1px;
    height: calc(100% - 20px);
    position: absolute;
    left: 50%;
    top: 10px;
    background: #d4d4d4;
  }
}

// 会员证
img {
  vertical-align: top;
}

.member_boxz {
  position: relative;
  width: 100%;

  .member_boxt {
    width: 100%;
  }

  .member_bianhao {
    // position: absolute;
    // left: 0;
    // top: 4%;
    background: #f8f8f6;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.8rem;

    img {
      width: 4rem;
    }

    span {
      font-size: 0.6rem;
      font-weight: 700;
      color: #000;

      &::before {
        content: '会员编号：';
        color: #a38363;
      }
    }
  }

  .member_content {
    color: #a38363;
    padding: 0 0.8rem;
    font-size: 0.6rem;
    background-image: url('https://xintu361.oss-cn-qingdao.aliyuncs.com/92p6d2m5urh27yorkdqc.png');

    .member_name {
      height: 1.5rem;

      span {
        padding: 0 0.75rem;
        font-weight: 700;
        font-size: 0.8rem;
        color: #000;
        letter-spacing: 0.15rem;
        border-bottom: 1px solid #a38363;
        font-family: '仿宋体';
      }
    }

    div:nth-child(2) {
      letter-spacing: 1px;
      line-height: 1.4rem;
      font-size: 0.5rem;
    }

    .member_data {
      margin-top: 0.4rem;

      span {
        display: inline-block;
        color: #000;
        padding: 0 0.25rem;
        border-bottom: 1px solid #a38363;
        font-family: '仿宋体';
        font-weight: 700;
      }
    }
  }
}
</style>
